import { type FC } from 'react';
import { View, Text, ScrollView } from 'react-native';
import { useSafeState, useMemoizedFn } from 'ahooks';
import StepWrapper from '../../components/StepWrapper';
import Hashtag, { type HashTagType } from './hashtag';
import { StepProps } from '../types';
import styles from './styles';

const desc = `We'll use it to help you find the content that suits you best.`;

const datas = Array.from({ length: 10 }).map((_, i) => {
  return {
    value: 'test' + i,
    label: 'Test' + i
  }
});

const Step2: FC<StepProps> = (props) => {
  const [hashtags, setHashtags] = useSafeState<string[]>([]);

  const onSelect = useMemoizedFn((item: HashTagType) => {
    const index = hashtags.findIndex(val => val === item.value);
    if (index > -1) {
      hashtags.splice(index, 1);
    } else {
      hashtags.push(item.value);
    }
    setHashtags([...hashtags]);
  });

  return (
    <StepWrapper
      desc={desc}
      next={false}
      onSubmit={props.onNext}
      disabled={!hashtags.length}
      buttonText="Let's go!"
      title='What are your interests?'
    >
      <View style={styles.container}>
        <View style={styles.tipContent}>
          <Text style={styles.tip}>{desc}</Text>
        </View>
        <ScrollView style={styles.scroller}>
          <View style={styles.hashtags}>
            {datas.map(item => {
              return (
                <Hashtag
                  {...item}
                  key={item.value}
                  onPress={onSelect}
                  active={!!hashtags.find(v => v === item.value)}
                />
              );
            })}
          </View>
        </ScrollView>
      </View>
    </StepWrapper>
  );
}

export default Step2;